<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="userInfo"></div>
</body>
<script>
    const obj = {
        id: 1,
        name: '张三',
        age: 18,
        email: 'gogery@163.com',
        avatar: 'https://yw.52kfw.cn/uploads/cover-1647393676655-981902524.png',
    }

    // 把对象的信息在网页里面以一句话的方式进行展示
    const oH2 = document.getElementById('userInfo');
    /* 传统的拼接是否存在什么弊端？
    1. 由于拼接的时候需要加上单双引号，容易导致错误
    2. 不支持自动换行，如果要换行，需要加上 \ 续行符
    */
    /* oH2.innerHTML = '我的\
    名字' + obj.name + ',年龄是' + obj.age + ',邮箱是' + obj.email + '， 我的头像是 <img src="' + obj.avatar + '">'; */
    // let userInfoStr = `我的名字张三,年龄是18,邮箱是gogery@163.com， 我的头像是 <img src="https://yw.52kfw.cn/uploads/cover-1647393676655-981902524.png">`;
    oH2.innerHTML = `我的名字${obj.name},
                    年龄是${obj.age},
                    邮箱是${obj.email}， 
                    我的头像是 <img  src="${obj.avatar}" alt="">`;


</script>

</html>